• Fix settings popup cropping items off-screen on short viewports
• Move scrolling styles from mobile-only media query to base popup
• Add Playwright regression test for popup scrollability at 900×500
• Preserve chat panel's overflow behavior for color-picker floats

Add regression test for popup scrollability

• Added new Playwright test settings popup stays scrollable when the viewport is short
• Test sets viewport to 900×500 and verifies popup has overflow-y: auto
• Confirms popup scrollHeight exceeds clientHeight and Delete pad button is reachable via scroll
• Addresses regression coverage for issue #7696

src/tests/frontend-new/specs/pad_settings.spec.ts

Enable popup scrolling for all viewport widths

• Move max-height: calc(100vh - 20px) and overflow-y: auto from mobile-only media query to base
 .popup-content rule
• Apply scrolling behavior to all viewports, not just mobile (max-width: 800px)
• Add exception rule .popup#users .popup-content { overflow: visible } to preserve chat panel's
 color-picker float behavior
• Remove duplicate overflow rules from mobile media query

src/static/css/pad/popup.css

Description

Setting .popup-content to overflow-y:auto makes it a scroll container, which clips absolutely
positioned descendants such as Nice Select’s option list. As a result, font/language dropdown menus
in Settings can be truncated when opened near the bottom of the popup on short viewports, making
options hard/impossible to click.

Code

src/static/css/pad/popup.css[R33-37]

+  /* Constrain height so popups (notably Settings with Pad-wide Settings
+     enabled) scroll instead of cropping items off-screen on short windows.
+     Fixes #7696. */
+  max-height: calc(100vh - 20px);
+  overflow-y: auto;

Evidence

The PR makes .popup-content a vertical scroll container (overflow-y:auto), which clips
overflowing content. Nice Select renders its dropdown list as an absolutely positioned element below
the control (position:absolute; top:100%), so when the list extends beyond the scroll container
bounds it will be visually clipped. Settings contains Nice Select dropdowns (font and language), so
this can directly impact Settings usability on short viewports—the exact scenario this PR targets.

src/static/css/pad/popup.css[25-44]
src/static/css/pad/form.css[106-139]
src/static/js/vendors/nice-select.ts[96-125]
src/templates/pad.html[129-199]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
With `overflow-y: auto` on `.popup-content`, popups become scroll containers that clip absolutely-positioned dropdown lists (Nice Select). This can truncate the font/language dropdown list in Settings and other popups on short viewports.
### Issue Context
Nice Select renders the options list as `position: absolute; top: 100%` under the `.nice-select` element. When `.popup-content` is a scroll container, overflow outside the popup is clipped.
### Fix Focus Areas
- Make Nice Select lists escape the scroll container when used inside popups (e.g., switch to `position: fixed` and set coordinates like the toolbar path does, or move/portal the list to `body`).
- Alternatively, toggle a CSS class on the nearest `.popup-content` while a Nice Select is open to temporarily set overflow to visible, then restore it on close.
- src/static/css/pad/popup.css[25-44]
- src/static/css/pad/form.css[106-139]
- src/static/js/vendors/nice-select.ts[96-129]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Description

The new Playwright test hard-requires scrollHeight > clientHeight, so it will fail if Settings
content ever fits within 900×500 (due to CSS tweaks, localization, or feature changes) even though
the popup remains correctly scrollable. The test already checks reachability of the bottom button
via scrollIntoViewIfNeeded() + toBeInViewport(), which is the behavior that matters.

Code

src/tests/frontend-new/specs/pad_settings.spec.ts[R182-187]

+    const dims = await popupContent.evaluate((el) => ({
+      overflowY: getComputedStyle(el).overflowY,
+      scrolls: el.scrollHeight > el.clientHeight,
+    }));
+    expect(dims.overflowY).toBe('auto');
+    expect(dims.scrolls).toBe(true);

Evidence

The test asserts runtime layout overflow (scrollHeight > clientHeight) rather than just verifying
that scrolling works and that the bottom control is reachable. This makes the test fail for benign
UI/layout changes that reduce content height, even when the intended regression (cropped unreachable
controls) is fixed.

src/tests/frontend-new/specs/pad_settings.spec.ts[170-191]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The test requires `scrollHeight > clientHeight`, which is fragile because it depends on Settings content height always overflowing at 900×500.
### Issue Context
The key behavior to validate is: the popup uses scrollable overflow styling and the bottom-most action (Delete pad) is reachable (not permanently cropped). The test already scrolls to `#delete-pad` and asserts it is in the viewport.
### Fix Focus Areas
- Remove/relax the `scrollHeight > clientHeight` assertion and rely on reachability checks.
- Or, if overflow must be asserted, first assert `#delete-pad` is NOT in viewport before scrolling (to prove scrolling was needed) and adjust viewport height accordingly.
- src/tests/frontend-new/specs/pad_settings.spec.ts[170-191]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools